import React from 'react'
// 引入Vant-icon图标
import { Description, WapHomeO, AppsO, Contact } from '@react-vant/icons'

const Tabbar = () =>
{
    // 钩子函数初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 定义选中的状态
    const [active,setActive] = React.useState('/')

    // 获取当前location对象
    const location = React.$Router.useLocation()

    // 函数组件里面没有生命周期,等于挂载,更新,卸载的组合hook函数
    // 类似Vue的监听watch函数
    React.useEffect(() => {
        setActive(location.pathname)
    })

    const To = (value) => {
        setActive(value)
        navigate(value)
    }

    return (
        <>
            <React.$Vant.Tabbar activeColor='#ef6382' onChange={To} value={active}>
                <React.$Vant.Tabbar.Item icon={<WapHomeO />} name="/" >首页</React.$Vant.Tabbar.Item>
                <React.$Vant.Tabbar.Item icon={<AppsO />} name='/product/product/index'>商品大全</React.$Vant.Tabbar.Item>
                <React.$Vant.Tabbar.Item icon={<Description />} name='/category/category/index'>学术</React.$Vant.Tabbar.Item>
                <React.$Vant.Tabbar.Item icon={<Contact />} name="/user/base/index">我的</React.$Vant.Tabbar.Item>
            </React.$Vant.Tabbar>
        </>
    )
}

export default Tabbar